<template>
  <div id="app" class="app">
    <aside class="aside">
      <div class="logo">
        <img style="height: 80px" draggable="false" :src="logo" alt/>
        <div>mo wallpaper</div>
        <nav-cat @change="handleClick"></nav-cat>
      </div>
    </aside>
    <main class="main">
      <div class="main-header">
        <nav-stuats :title="title"></nav-stuats>
      </div>
      <div class="component">
        <transition name="slide-fade">
          <kep-alive exclude="AboutPage">
            <!--  component 动态加载组件 和 transition kep-alive 一起使用 key is 组件名称     -->
            <component :key="cname" :is="cname" class="page-compnent"></component>
          </kep-alive>
        </transition>
      </div>
    </main>
    <div class="app-bg" :class="cname"></div>
  </div>
</template>

<script>
import navCat from '@/views/components/navCat';
import navStuats from "@/views/components/navStuats";
import HotPage from "@/views/pages/HotPage";
import AcgPage from "@/views/pages/AcgPage";
import AboutPage from "@/views/pages/AboutPage"
import DownloadPage from "@/views/pages/DownloadPage";
import CollectionPage from "@/views/pages/CollectionPage";
import PeoplePage from "@/views/pages/PeoplePage";
import CharacterPage from "@/views/pages/CharacterPage";
import logo from '@/assets/logo.svg'

export default {
  name:'App',
  components:{
    navCat,
    navStuats,
    HotPage,
    AcgPage,
    AboutPage,
    DownloadPage,
    CollectionPage,
    PeoplePage,
    CharacterPage
  },
  data(){
    return{
      logo,
      title:'热门推荐',
      cname:'HotPage',
      include:['people','acg','hot'],
      view:{}
    }
  },
  methods:{
    handleClick({url,title,component}){
      console.log("handleClick-------",title)
      console.log("handleClick-------",component)
      this.title = title
      this.cname = component
    }
  }
}
</script>

<style lang="less" scoped>
.app{
  font-size: 12px;
  width: 100vw;
  height: 100vh;
  display: flex;
  overflow: hidden;
  position: relative;
  box-shadow: 8px 8px 10px gray;
  /*-webkit-app-region: drag;*/
  .aside{
    width: 260px;
    background-color: #201f2908;
    box-shadow: -10px 0 20px 0px #000000c4;
    color: #fff;
    -webkit-app-region: drag;

    .logo{
      -webkit-app-region:no-drag;
      text-align: center;
      font-size: 20px;
      line-height: 30px;
      font-weight: 700;
      img{
        width: 120px;
        margin-top: 30px;
      }
    }
  }

  .main {
    flex: 1;
    overflow: hidden;

    .main-header {
      height: 40px;
      color: #fff;
    }

    .component {
      height: calc(100% - 40px);
      position: relative;

      .page-component {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
      }
    }
  }

  .app-bg{
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: #0c0e29;
    background-image: url(@/assets/bg.jpg);
    background-size: 100% 100%;
    top: 0;
    left: 0;
    z-index: -1;
    transition: background 0.8s;
    &.CollectionPage,
    &.CharacterPage,
    &.PeoplePage {
      background-image: url(@/assets/people-bg.png);
    }

    &.HotPage,
    &.DownloadPage {
      background-image: url(@/assets/down-bg.jpg);
    }

    &.AcgPage,
    &.AboutPage {
      background-image: url(./assets/sc-bg.png);
    }
    &::before {
      content: "";
      position: absolute;
      width: 100vw;
      height: 100vh;
      top: 0;
      left: 0;
      backdrop-filter: blur(20px);
    }
  }
}

.slide-fade-leave-active,
.slide-fade-enter-active {
  transition: all 0.8s ease;
}

.slide-fade-enter,
.slide-fade-leave-to {
  overflow: hidden;
  transform: scale(0.1) translateY(-600px);
  opacity: 0;
}

.slide-fade-leave-to {
  position: absolute;
}
</style>
